<template>
    <div class="home">
        <div class="title">demo---练习</div>
        <div class="demo">
            <div class="demo-button" @click="functionVolune">demo</div>
        </div>
    </div>
    
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
// 音量条控制demo页面跳转
const functionVolune = ()=>{
    router.push('./volume')
}

</script>
<style lang="less" scoped>
 @font-face {
    font-family: "font-title";
    src: url(https://gamer.qpic.cn/2024/11/04_45ebfa79cedfd53ead59463dcd7f666b.woff2);
  }
  @font-face {
    font-family: "demo-button";
    src: url(https://gamer.qpic.cn/2024/12/26_f832939458e5e54f73b1702bc4edb7e8.TTF);
  }
.home {
    width: 100vw;
    height: 100vh;
}
.title {
    width: 100vw;
    height: 100px;
    font-size: 24px;
    font-family: "font-title";
    color: #000;
}
.demo {
    height: 100vh;
    display: flex;
}
.demo-button {
  align-self: flex-start;
  width: 200px;
  height: 50px;
  background-color: #5fdf94;
  border-radius: 15px;
  font-family: "demo-button"; 
  color: #ffffff;
  font-size: 24px;
  line-height: 50px;
  margin: 20px 0 20px 30px;
}
</style>